<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item >
          <el-input size="mini" v-model="username" placeholder="登录名" style="width:150px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select size="mini" v-model="status" clearable placeholder="状态" style="width:100px;">
              <el-option
                v-for="item in statusList"
                :key="item.statusId"
                :label="item.label"
                :value="item.statusId">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
           <el-button type="primary" size="mini" @click="query()"><i class="el-icon-search"></i>搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="popuAdd()">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <div>
      <div style="width:19%;float:left;border:1px solid #ebeef5;">
        <el-tree :data="data" ref="rootTree" :props="defaultProps" @node-click="nodeClick" default-expand-all :expand-on-click-node="false"></el-tree>
      </div>
      <div style="width:80%;float:right">
        <!-- 列表 -->
        <el-table :data="tableList" size="mini" v-loading="listLoading" border element-loading-text="拼命加载中" style="width: 100%;" :max-height="tableHeight">
          <el-table-column prop="username" label="登陆名" min-width="80">
          </el-table-column>
          <el-table-column prop="name" label="姓名" min-width="120">
          </el-table-column>
          <el-table-column prop="phone" label="联系电话" min-width="110">
          </el-table-column>
          <el-table-column prop="deptName" label="所属部门" min-width="100">
          </el-table-column>
          <el-table-column prop="createName" label="创建人" min-width="120">
          </el-table-column>
          <el-table-column  label="状态" min-width="80" >
            <template slot-scope="scope">
              <el-tag size="small" v-if="scope.row.status == 1">正常</el-tag>
              <el-tag size="small" v-if="scope.row.status == 2">锁定</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="operation" label="操作" width="200">
            <template slot-scope="scope" >
              <el-button size="mini" type="primary"  @click="popuUpdate(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="popuDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination layout="total, sizes, prev, pager, next, jumper"
                       background
                       :page-sizes="[10,20,30,40,50]"
                       :page-size="10"
                       @size-change="sizeChange"
                       :total="total"
                       @current-change="currentChange"
                       style="text-align:right;">
        </el-pagination>
      </div>
    </div>

    <!-- 新增 or 编辑 -->
    <el-dialog :title="title" :visible.sync="isShowEditVisible" :modal-append-to-body='false' :close-on-click-modal="false">
      <el-form label-width="80px" :model="temp" ref="dataForm">
        <el-form-item label="登陆名" prop="username">
          <el-input v-model="temp.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="temp.name"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="temp.phone"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" prop="deptId">
          <el-select v-model="temp.deptId" clearable placeholder="所属部门">
            <el-option
              v-for="item in deptList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowEditVisible = false">取消</el-button>
        <el-button type="primary" :loading="listLoading" @click="save" class="title1">确定</el-button>
      </div>
    </el-dialog>

    <!-- 删除弹框 -->
    <el-dialog title="删除" :visible.sync="deleteVisible" width="30%" :modal-append-to-body='false' :close-on-click-modal="false">
      <span>确认删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="del">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'childList',
        label: 'name'
      },
      tableList: [],
      tableHeight: 450,
      deptList: [],
      isAdd: 0,
      title: '修改用户',
      listLoading: true,
      isShowEditVisible: false,
      deleteVisible: false,
      temp: {
        id: '',
        cname: '',
        date: '',
        status: ''
      },
      total: 0,
      page: 1,
      pageSize: 10,
      statusList: [
        {
          statusId: 1,
          label: '启用'
        }, {
          statusId: 2,
          label: '锁定'
        }
      ],
      status: '',
      username: ''
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    }
  },
  methods: {
    getPageList() {
      this.listLoading = true
      const params = {
        username: this.username,
        status: this.status,
        page: this.page,
        pageSize: this.pageSize
      }
      request({
        url: '/v1/users', method: 'get', params
      }).then(response => {
        const pageList = response.data.records.filter((item, index) => index < this.pageSize && index >= 0)
        this.total = response.data.total
        this.tableList = pageList
        this.listLoading = false
      })

      const deptParams = {
          pid: 0
      }
      request({
          url: '/v1/depts/pid/0', method: 'get',deptParams
      }).then(response => {
          this.data = response.data
          this.listLoading = false
      })
    },
    getDeptList() {
      request({
        url: '/v1/depts/all',
        method: 'get'
      }).then(response => {
        this.deptList = response.data
      })
    },
    query() {
      this.page = 1
      this.total = 0
      this.getPageList()
    },
    nodeClick(keys){
        this.listLoading = true
        const params = {
            username: this.username,
            status: this.status,
            page: this.page,
            pageSize: this.pageSize,
            deptId: keys.id
        }
        request({
            url: '/v1/users', method: 'get', params
        }).then(response => {
            const pageList = response.data.records.filter((item, index) => index < this.pageSize && index >= 0)
            this.total = response.data.total
            this.tableList = pageList
            this.listLoading = false
        })
    },
    popuAdd() {
      this.isAdd = 1
      this.title = '新增用户'

      this.isShowEditVisible = true
      this.temp = {}
      this.getDeptList()
    },
    popuUpdate(row) {
      this.isAdd = 0
      this.title = '修改用户'

      this.isShowEditVisible = true
      this.temp = Object.assign({}, row)
      this.getDeptList()
    },
    popuDel(row) {
      this.deleteVisible = true
      this.temp = Object.assign({}, row)
    },
    del() {
      const tempData = Object.assign({}, this.temp)
      request({
        url: '/v1/users/' + tempData.id,
        method: 'delete'
      }).then(() => {
        this.getPageList()
        this.deleteVisible = false
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    save() {
      const tempData = Object.assign({}, this.temp)
      var url = '/v1/users/' + tempData.id
      var method = 'put'
      if (this.isAdd === 1) {
        url = '/v1/users'
        method = 'post'
      }
      request({
        url: url,
        method: method,
        data: tempData
      }).then(() => {
        this.getPageList()
        this.isShowEditVisible = false
        this.$notify({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    sizeChange(val) {
      this.pageSize = val
      this.getPageList()
    },
    currentChange(val) {
      this.page = val
      this.getPageList()
    }
  },
  mounted() {
    // 初始化数据
    this.getPageList()
    // 动态设置表格最大高度
    const this_ = this
    var headHeight = 190
    var clientHeight = document.body.clientHeight
    this_.tableHeight = clientHeight - headHeight
    window.addEventListener('resize', function() {
      clientHeight = document.body.clientHeight
      this_.tableHeight = clientHeight - headHeight
    })
  }
}
</script>
